<script setup lang='ts'>
import { useRouter } from 'vue-router'

const router = useRouter()

function goHelp() {
    router.push('/help-center')
}
</script>

<template>
    <!-- 用于父组件修改样式 -->
    <div class="jc-footer">
        <div class="pt-60 mx-auto my-0 h-390 w-1300">
            <el-row>
                <div class="footer-logo mb-41 h-50 w-150" />
            </el-row>

            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="text-14 c-#AAAAAA">
                        安居链，依托地产行业经验和集采优势，创建了一个透明、高效、低成本的建材交易平台。我们整合上下游资源，严格把控质量，提供卓越服务，运用大数据和资本力量，构建了一个可信赖的建材产业生态，推动行业创新，促进共赢发展。
                    </div>
                </el-col>

                <el-col :span="10"
                        :offset="2"
                >
                    <div class="text-14 flex gap-10">
                        <div class="text-center">
                            <div class="mb-16 text-16 text-#000 font-600"
                                 @click="goHelp"
                            >
                                如何入驻
                            </div>

                            <ul class="text-#666 text-left"
                                @click="goHelp"
                            >
                                <li>线上注册</li>

                                <li>企业认证</li>
                            </ul>
                        </div>

                        <div class="text-center">
                            <div class="mb-16 text-16 text-#000 font-600"
                                 @click="goHelp"
                            >
                                如何下单
                            </div>

                            <ul class="text-#666 text-left"
                                @click="goHelp"
                            >
                                <li>下单流程</li>

                                <li>订单状态</li>
                            </ul>
                        </div>

                        <div class="text-center">
                            <div class="mb-16 text-16 text-#000 font-600"
                                 @click="goHelp"
                            >
                                如何支付
                            </div>

                            <ul class="text-#666 text-left"
                                @click="goHelp"
                            >
                                <li>网上支付</li>

                                <li>银行转账</li>
                            </ul>
                        </div>

                        <div class="text-center">
                            <div class="mb-16 text-16 text-#000 font-600"
                                 @click="goHelp"
                            >
                                售后服务
                            </div>

                            <ul class="text-#666 text-left"
                                @click="goHelp"
                            >
                                <li>如何换货</li>
                            </ul>
                        </div>

                        <div class="text-center">
                            <div class="mb-16 text-16 text-#000 font-600">
                                加入安居链
                            </div>

                            <ul class="text-#666 text-left">
                                <li>入驻安居链</li>
                            </ul>
                        </div>

                        <div class="text-center">
                            <div class="mb-16 text-16 text-#000 font-600">
                                关于安居链
                            </div>

                            <ul class="text-#666 text-left">
                                <li>关于我们</li>

                                <li>隐私政策</li>

                                <li>新闻中心</li>
                            </ul>
                        </div>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="text-16 c-#aaa flex justify-between">
                        <div class="text-center">
                            <div class="mb-10 bg-red h-100 w-100">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/9a7c49af-e179-4ba5-8e78-edaf76aff3d9.jpg"
                                     alt="安居链小程序"
                                >
                            </div>

                            <div>安居链小程序</div>
                        </div>

                        <div class="text-center">
                            <div class="mb-10 bg-red h-100 w-100">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/00b86881-7dc5-4001-b204-6676fabdb484.jpg"
                                     alt="安居链公众号"
                                >
                            </div>

                            <div>安居链公众号</div>
                        </div>

                        <div class="text-center">
                            <div class="mb-10 bg-red h-100 w-100">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/110e53c2-e302-47bb-a8f3-0a42d16ea012.jpg"
                                     alt="安居链APP"
                                >
                            </div>

                            <div>安居链APP</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="bg-#222 h-110 w-full">
            <div class="mx-auto text-14 text-#fff h-full w-1300 justify-center">
                <div class="py-12 c-#FFF">
                    <span class="mr-24 cursor-pointer"
                          @click="() => router.push('/') "
                    >商城首页</span>

                    <span class="line mr-24 relative">关于我们</span>

                    <span class="line mr-24 relative">新闻中心</span>

                    <span class="line relative cursor-pointer"
                          @click="goHelp"
                    >帮助中心</span>
                </div>

                <div class="c-#767676">
                    <span class="mr-20">©Copyright 2024</span>

                    <span class="mr-20">武汉安居供应链有限公司</span>

                    <span>鄂ICP备2023030090号</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.line::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    position: absolute;
    top: 4px;
    left: -12px;
    background: #fff;
}

.footer-logo {
    background: url('https://public-obs-cdn.anjulian.com.cn/2024-05-28/1fcfec2a-1d97-4953-9957-d3968c3e54c8.png')
        0% 0% / 100% 100% no-repeat;
}

li {
    margin-bottom: 8px;
    cursor: pointer;
}
</style>
